<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>弹幕</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<style>
  * {
    /* background: #d109bacb; */
  }
</style>

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
  <button class="button">切换字体 变大</button>
  <button class="button2">切换字体 变小</button>
  <button class="button3">关闭弹幕</button>
</body>
<script>
  let canvas = document.querySelector("#canvas");
  let ctx = canvas.getContext("2d");
  let font = 16;
  console.log(ctx);
  ctx.font = `${font}px 微软雅黑`; //设置字体

  ctx.shadowBlur = 30; //模糊度
  ctx.shadowColor = "rgba(9, 109, 209, 0.797)"; //颜色
  ctx.shadowOffsetX = 30; //阴影的偏移量x
  ctx.shadowOffsetY = 20; //阴影的偏移量y
  ctx.strokeStyle = "#d109bacb"; //文字颜色
  function bulletChat(time) {
    let date = time;
    setInterval(() => {
      ctx.clearRect(0, 0, 1000, 1000); //清空画布
      date -= 10;
      ctx.strokeText("我是描边", date, 100);
      ctx.fillText("摆烂我是第一名", date, 200); //内容文字
      if (date === 0) {
        date = 1000;
      }
    }, 30);
  }
  bulletChat(1000);
  let button = document.querySelector(".button");

  button.addEventListener("click", () => {
    if (font < 100) {
      font += 4;
      ctx.font = `${font}px 微软雅黑`; //设置字体
    } else {
      alert(`字体不能太小了${font}像素`);
    }
  });
  let button2 = document.querySelector(".button2");
  button2.addEventListener("click", () => {
    if (font <= 10 || font === 10) {
      alert(`字体不能太小了${font}像素`);
    } else {
      font -= 4;
      ctx.font = `${font}px 微软雅黑`; //设置字体s
    }
  });
  let button3 = document.querySelector('.button3')
  // button3.addEventListener("click", () => {

  //   ctx.clearRect(0, 0, 1000, 1000); //清空画布
  // });
</script>

</html>